<template>
    <div class="flex items-center justify-between p-26px">
        <div class="flex flex-wrap items-center">
            <b class="text-14px">时间</b>
            <ul class="flex date-filter">
                <li :class="{ 'active': state.day == 1 }" @click="handleDay(1)">今天</li>
                <li :class="{ 'active': state.day == 2 }" @click="handleDay(2)">昨天</li>
                <li :class="{ 'active': state.day == 7 }" @click="handleDay(7)">近7天</li>
                <li :class="{ 'active': state.day == 30 }" @click="handleDay(30)">近30天</li>
            </ul>
            <b class="text-14px">自定义时间</b>
            <div class="ml-10px mr-16px">
                <el-date-picker v-model="state.customizeDate" type="daterange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" size="default" />
            </div>
            <slot name="flowAnalysis"></slot>
            <b class="text-14px">设备</b>
            <ul class="flex date-filter">
                <li :class="{ 'active': state.device == 0 }" @click="handleDevice(0)">全部</li>
                <li :class="{ 'active': state.device == 1 }" @click="handleDevice(1)">计算机</li>
                <li :class="{ 'active': state.device == 2 }" @click="handleDevice(2)">移动设备</li>
            </ul>
        </div>
        <div class="flex items-center">
            <el-dropdown @command="handleCommand">
                <el-button type="primary" round>切换网站<svg-icon size="18px"
                        icon-class="arrow-down-s-line"></svg-icon></el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item :command="item.url" v-for="(item, index) in websites" :key="index">{{
                            item.url }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ISite } from '@/api/sem/types'
import { dateFormat } from '@/utils/date'

defineProps({
    websites: {
        type: Array as PropType<ISite[]>,
        default: () => []
    }
})

const emit = defineEmits(['update:data','update:day'])

const state = reactive({
    day: 1,
    customizeDate: <string[]>[],
    startTime: '',
    endTime: '',
    device: 0,
    source:'',
    activeIndex: 0,
    website: '',
    websites: <ISite[]>[],
    type: 'ip'
})

async function handleDay(index: number) {
    state.day = index
    state.activeIndex = 0
    state.type = 'ip'
    //当day发生变化时，重置自定义时间
    state.customizeDate = []
    state.startTime = ''
    state.endTime = ''
    emit('update:day', state)
}

async function handleDevice(device: number) {
    state.device = device
    state.activeIndex = 0
    state.type = 'ip'
    emit('update:data', state)
}

function handleCommand(value:string){
    state.website = value
    state.activeIndex = 0
    state.type = 'ip'
    emit('update:data', state)
}

watch(() => state.customizeDate, (newVal: string[]) => {
    if(newVal.length > 0){
        state.startTime = dateFormat(newVal[0], 'YYYY-MM-DD')
        state.endTime = dateFormat(newVal[1], 'YYYY-MM-DD')
        emit('update:data', state)
    }
})

</script>

<style scoped></style>